<template>
  <div class="Details" v-loading="loading">
    <h3>
      <div><span class="tag"></span> 基本信息</div>
    </h3>
    　　　
    <table bgcolor="#ebebeb" cellspacing="1" width="100%">
      　　　　　　　　　　
      <tr bgcolor="white">
        　　　　
        <td bgcolor="#fafafa" width="13%" height="150" rowspan="2" class="td">
          头像
        </td>
        　　　　
        <td align="center" rowspan="2" width="20%">
          <div
            style="display: flex; align-items: center; justify-content: center"
          >
            <div class="avatarBox">
              <el-image
                style="width: 100px; height: 100px; border-radius: 8px"
                :src="userInfo.avatar"
                :preview-src-list="[userInfo.avatar]"
              >
              </el-image>
              <img
                class="imgV"
                src="../../../assets/image/photoRealAuth.png"
                alt=""
                v-if="userInfo.photoRealAuth == 1"
              />
              <span
                :style="{
                  background: userInfo.onlineStatus == 1 ? '#0df534' : '#ccc',
                }"
                class="oneline"
              ></span>
            </div>
            <el-button
              style="margin-left: 20px"
              @click="delAvatar('1')"
              type="info"
              plain
              >删除</el-button
            >
          </div>
        </td>
        　　　　
        <td bgcolor="#fafafa" width="13%" class="td">用户ID</td>
        　　　　
        <td width="20%" style="padding: 0 10px">
          <el-input v-model="userInfo.userId" disabled></el-input>
        </td>
        　　　　
        <td bgcolor="#fafafa" width="13%" class="td">性别</td>
        　　　　
        <td width="20%" style="padding: 0 10px">
          <el-radio-group v-model="userInfo.sex">
            <el-radio disabled label="1">男</el-radio>
            <el-radio disabled label="2">女</el-radio>
          </el-radio-group>
        </td>

        　
      </tr>
      　
      <tr bgcolor="white">
        <td bgcolor="#fafafa" width="13%" class="td">用户昵称</td>
        　　　　
        <td width="20%" style="padding: 0 10px">
          <el-input
            style="width: 70%; margin-right: 10px"
            v-model="userInfo.nickName"
            disabled
          ></el-input>
          <el-button type="info" plain @click="delAvatar('2')">删除</el-button>
        </td>
        <td bgcolor="#fafafa" width="13%" class="td">版本</td>
        　　　　
        <td width="20%" style="padding: 0 10px">
          <el-input v-model="userInfo.version" disabled></el-input>
        </td>
        　　　　 　　　　 　
      </tr>
      　
      <tr height="70" bgcolor="white">
        <!----行-->
        　　　　
        <td bgcolor="#fafafa" width="13%" class="td">绑定手机</td>
        　　　　
        <td width="20%" style="padding: 0 10px">
          <el-input v-model="userInfo.mobile" disabled></el-input>
        </td>
        　　　　 　　　　
        <td bgcolor="#fafafa" width="13%" class="td">系统</td>
        　　　　
        <td width="20%" style="padding: 0 10px">
          <el-input v-model="userInfo.system" disabled></el-input>
        </td>
        <td bgcolor="#fafafa" width="13%" class="td">最后登录IP</td>
        　　　　
        <td width="20%" style="padding: 0 10px">
          <el-input v-model="userInfo.ip" disabled></el-input>
        </td>
        　　　　
      </tr>
      <tr height="70" bgcolor="white">
        <!----行-->
        　　　　
        <td bgcolor="#fafafa" width="13%" class="td">注册时间</td>
        　　　　
        <td width="20%" style="padding: 0 10px">
          <el-input v-model="userInfo.registerTime" disabled></el-input>
        </td>
        　　　　
        <td bgcolor="#fafafa" width="13%" class="td">最后登陆时间</td>
        　　　　
        <td width="20%" style="padding: 0 10px">
          <el-input v-model="userInfo.lastLoginTime" disabled></el-input>
        </td>
        　　　　
        <td bgcolor="#fafafa" width="13%" class="td">最后下线时间</td>
        　　　　
        <td width="20%" style="padding: 0 10px">
          <el-input disabled></el-input>
        </td>
        　　　　
      </tr>
      <tr height="70" bgcolor="white">
        <!----行-->
        　　　　
        <td bgcolor="#fafafa" width="13%" class="td">渠道</td>
        　　　　
        <td width="20%" style="padding: 0 10px">
          <el-input v-model="userInfo.channel" disabled></el-input>
        </td>
        　　　　
        <td bgcolor="#fafafa" width="13%" class="td">流失天数</td>
        　　　　
        <td width="20%" style="padding: 0 10px">
          <el-input v-model="userInfo.lossDay" disabled></el-input>
        </td>
        　　　　
        <td bgcolor="#fafafa" width="13%" class="td">语音标签</td>
        　　　　
        <td width="20%" style="padding: 0 10px">
          <audio
            controls
            style="width: 100%; height: 40px"
            :src="userInfo.voiceLable"
          >
            不支持
          </audio>
        </td>
        　　　　
      </tr>
    </table>
    <!-- 用户身份 -->
    <div style="margin-top: 20px">
      <h3>
        <div><span class="tag"></span> 用户身份</div>
      </h3>
      　　　
      <table bgcolor="#ebebeb" cellspacing="1" width="100%">
        　　　　　　　　　　 　
        <tr height="70" bgcolor="white">
          <!----行-->
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">用户身份</td>
          　　　　
          <td colspan="5" width="20%" style="padding: 0 10px">
            <el-input
              v-model="userInfo.identity"
              style="width: 60%; margin-right: 10px"
              disabled
            ></el-input>
            <el-button type="info" @click="changeUserType" plain
              >变更身份</el-button
            >
          </td>
          <td bgcolor="#fafafa" width="13%" class="td">所属工会</td>
          　　　　
          <td colspan="5" width="20%" style="padding: 0 10px">
            <!-- <el-input v-model="userInfo.unionName" disabled></el-input> -->
            <el-select
              style="width: 100%"
              v-model="userInfo.unionName"
              placeholder=""
              disabled
            >
              <el-option
                v-for="item in unionOptions"
                :key="item.value"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </td>
          <td bgcolor="#fafafa" width="13%" class="td">身份认证时期</td>
          　　　　
          <td colspan="5" width="20%" style="padding: 0 10px">
            <el-input v-model="userInfo.authorAuthTime" disabled></el-input>
          </td>
          　　　　 　　　　
        </tr>
      </table>
    </div>
    <!-- 心动值信息 -->
    <div style="margin-top: 20px">
      <h3>
        <div><span class="tag"></span> 心动值信息</div>
        <el-button
          type="info"
          size="small"
          @click="setLable"
          plain
          :disabled="!userInfo.sex"
          >修改心动标签</el-button
        >
      </h3>
      　　　
      <table bgcolor="#ebebeb" cellspacing="1" width="100%">
        　　　　　　　　　　 　
        <tr height="70" bgcolor="white">
          <!----行-->
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">心动值</td>
          　　　　
          <td colspan="5" width="20%" style="padding: 0 10px">
            <el-input
              style="width: 70%; margin-right: 10px"
              v-model="userInfo.credit"
            ></el-input>
            <el-button type="info" plain @click="editCredit">修改</el-button>
          </td>
          <td bgcolor="#fafafa" width="13%" class="td">心动标签</td>
          　　　　
          <td colspan="5" width="20%" style="padding: 0 10px">
            <!-- <el-input v-model="userInfo.unionName" disabled></el-input> -->
            <el-select
              style="width: 100%"
              v-model="userInfo.lable"
              placeholder=""
              disabled
            >
              <el-option
                v-for="item in lableOption"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </td>
          <td bgcolor="#fafafa" width="13%" class="td"></td>
          　　　　
          <td colspan="5" width="20%" style="padding: 0 10px"></td>
          　　　　 　　　　
        </tr>
      </table>
    </div>
    <!-- 代理信息 -->
    <div style="margin-top: 20px">
      <h3>
        <div><span class="tag"></span> 代理信息</div>
        <el-button
          type="info"
          size="small"
          @click="bindingInvite"
          plain
          :disabled="userInfo.bindCode != ''"
          >绑定邀请人</el-button
        >
      </h3>
      　　　
      <table bgcolor="#ebebeb" cellspacing="1" width="100%">
        　　　　　　　　　　 　
        <tr height="70" bgcolor="white">
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">
            <i class="el-icon-postcard"></i>
            邀请码
          </td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input v-model="userInfo.code" disabled></el-input>
          </td>
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">
            <i class="el-icon-date"></i>
            绑定邀请码
          </td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input v-model="userInfo.bindCode" disabled></el-input>
          </td>
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">
            <i class="el-icon-edit-outline"></i>
            邀请人ID
          </td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input
              :disabled="userInfo.bindCode != ''"
              v-model="userInfo.bindId"
              placeholder="未绑定"
            ></el-input>
          </td>
          　　　　
        </tr>
      </table>
    </div>
    <!-- 实名信息 -->
    <div style="margin-top: 20px">
      <h3>
        <div><span class="tag"></span> 实名信息</div>
        <el-button type="info" size="small" @click="unbindBtn" plain
          >解除实名认证绑定</el-button
        >
      </h3>
      　　　
      <table bgcolor="#ebebeb" cellspacing="1" width="100%">
        　　　　　　　　　　 　
        <tr height="70" bgcolor="white">
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">是否实名</td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input v-model="userInfo.isAuth" disabled></el-input>
          </td>
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">出生年月日</td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input v-model="userInfo.birthday" disabled></el-input>
          </td>
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">实名认证年龄</td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input v-model="userInfo.age" disabled></el-input>
          </td>
          　　　　
        </tr>
        <tr height="70" bgcolor="white">
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">证件号码</td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input v-model="userInfo.IDCard" disabled></el-input>
          </td>
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">真实姓名</td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input v-model="userInfo.realName" disabled></el-input>
          </td>
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">认证日期</td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input v-model="userInfo.authTime" disabled></el-input>
          </td>
          　　　　
        </tr>
      </table>
    </div>
    <!-- VIP信息 -->
    <div style="margin-top: 20px">
      <h3>
        <div><span class="tag"></span> VIP信息</div>
      </h3>
      　　　
      <table bgcolor="#ebebeb" cellspacing="1" width="100%">
        　　　　　　　　　　 　
        <tr height="70" bgcolor="white">
          <!----行-->
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">是否VIP</td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input v-model="userInfo.isVip" disabled></el-input>
          </td>
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">首次购买时间</td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input v-model="userInfo.firstVipTime" disabled></el-input>
          </td>
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">VIP到期时间</td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input v-model="userInfo.vipExpiredTime" disabled></el-input>
          </td>
          　　　　
        </tr>
      </table>
    </div>
    <!-- 绑定信息 -->
    <div style="margin-top: 20px">
      <h3>
        <div><span class="tag"></span> 第三方账号</div>
      </h3>
      　　　
      <table bgcolor="#ebebeb" cellspacing="1" width="100%">
        　　　　　　　　　　 　
        <tr height="70" bgcolor="white">
          <!----行-->
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">QQ</td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input
              v-model="userInfo.qq"
              style="width: 60%"
              disabled
              placeholder="请输入内容"
            ></el-input>
            <el-button
              type="info"
              style="margin-left: 10px"
              @click="unbundling('1')"
              plain
              >解绑QQ</el-button
            >
          </td>
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">微信</td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input
              v-model="userInfo.wechat"
              style="width: 60%"
              disabled
              placeholder="请输入内容"
            ></el-input>
            <el-button
              type="info"
              style="margin-left: 10px"
              @click="unbundling('0')"
              plain
              >解绑微信</el-button
            >
          </td>
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td"></td>
          　　　　
          <td width="20%" style="padding: 0 10px"></td>
          　　　　
        </tr>
      </table>
    </div>
    <!-- 资产记录 -->
    <div style="margin-top: 20px">
      <h3>
        <div><span class="tag"></span> 资产信息</div>
      </h3>
      　　　
      <table bgcolor="#ebebeb" cellspacing="1" width="100%">
        　　　　　　　　　　 　
        <tr height="70" bgcolor="white">
          <!----行-->
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">宝石数量</td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input
              v-model="userInfo.diamond"
              style="width: 40%"
              disabled
            ></el-input>
            <el-button @click="clearGem">清空</el-button>
            <el-button
              type="info"
              style="margin-left: 10px"
              @click="water(2)"
              plain
              >宝石流水</el-button
            >
          </td>
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">金币数量</td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input
              v-model="userInfo.coin"
              style="width: 60%"
              disabled
              placeholder="请输入内容"
            ></el-input>
            <el-button
              type="info"
              style="margin-left: 10px"
              @click="water(1)"
              plain
              >金币流水</el-button
            >
          </td>
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td"></td>
          　　　　
          <td width="20%" style="padding: 0 10px"></td>
          　　　　
        </tr>
      </table>
    </div>

    <!-- 账号状态 -->
    <div style="margin-top: 20px">
      <h3>
        <div><span class="tag"></span> 账号状态</div>
      </h3>
      　　　
      <table bgcolor="#ebebeb" cellspacing="1" width="100%">
        　　　　　　　　　　 　
        <tr height="70" v-if="userInfo.status != '已封禁'" bgcolor="white">
          <!----行-->
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">状态</td>
          　　　　
          <td colspan="5" style="padding: 0 10px">
            <el-input
              v-model="userInfo.status"
              style="width: 15%"
              disabled
              placeholder="请输入内容"
            ></el-input>
            <el-button
              type="warning"
              style="margin-left: 10px"
              @click="userBanBtn"
              plain
              v-if="userInfo.status != '已注销'"
              >禁封账号</el-button
            >
            <el-button
              type="danger"
              v-if="userInfo.status != '已注销'"
              @click="cancellation"
              plain
              >注销账号</el-button
            >
          </td>
          　　　　 　　　　
        </tr>
        <tr height="70" v-else bgcolor="white">
          <!----行-->
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">状态</td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input
              v-model="userInfo.status"
              style="width: 60%"
              disabled
            ></el-input>
            <el-button
              type="info"
              style="margin-left: 10px"
              @click="unsealBtn"
              plain
              >立即解封</el-button
            >
          </td>
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">解封时间</td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input v-model="userInfo.enableTime" disabled></el-input>
          </td>
          　　　　
          <td bgcolor="#fafafa" width="13%" class="td">禁封原因</td>
          　　　　
          <td width="20%" style="padding: 0 10px">
            <el-input v-model="userInfo.banReason" disabled></el-input>
          </td>
          　　　　
        </tr>
      </table>
    </div>

    <!-- 以下弹窗 -->
    <!-- 流水弹框 -->
    <el-dialog
      :destroy-on-close="true"
      :title="waterTitle"
      :visible.sync="waterShow"
      width="50%"
      center
    >
      <GoldWater :id="userInfo.userId" v-if="waterType == 1"></GoldWater>
      <IntegralWater
        :id="userInfo.userId"
        v-if="waterType == 2"
      ></IntegralWater>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" class="btn" @click="waterShow = false"
          >关 闭</el-button
        >
      </span>
    </el-dialog>
    <!-- 封禁弹框 -->
    <el-dialog title="封禁账户" :visible.sync="dialogVisible" width="40%">
      <div class="dialogBox">
        <p>
          <span>用户ID</span>
          <el-input v-model="id" placeholder="请输入内容" disabled></el-input>
        </p>
        <p>
          <span>用户昵称</span>
          <el-input v-model="name" disabled></el-input>
        </p>
        <p>
          <span class="addRedStar">违规原因</span>
          <el-radio v-model="banReason" label="资料作假">资料作假</el-radio>
          <el-radio v-model="banReason" label="广告营销">广告营销</el-radio>
          <el-radio v-model="banReason" label="诈骗托儿">诈骗托儿</el-radio>
          <el-radio v-model="banReason" label="色情低俗">色情低俗</el-radio>
          <el-radio v-model="banReason" label="恶意骚扰">恶意骚扰</el-radio>
          <el-radio v-model="banReason" label="其他">其他</el-radio>
        </p>
        <p>
          <span class="addRedStar">封禁功能</span>
          <el-checkbox-group v-model="banType">
            <el-checkbox label="1">封禁账号</el-checkbox>
            <!-- <el-checkbox label="2">封禁匹配</el-checkbox> -->
            <!-- <el-checkbox label="3">封禁预约</el-checkbox> -->
            <!-- <el-checkbox label="4">封禁充值</el-checkbox> -->
            <!-- <el-checkbox label="5">封禁提现</el-checkbox> -->
          </el-checkbox-group>
        </p>
        <p>
          <span class="addRedStar">封禁时间</span>
          <el-radio v-model="banDays" label="1">1天</el-radio>
          <el-radio v-model="banDays" label="3">3天</el-radio>
          <el-radio v-model="banDays" label="7">7天</el-radio>
          <el-radio v-model="banDays" label="15">15天</el-radio>
          <el-radio v-model="banDays" label="30">30天</el-radio>
          <el-radio v-model="banDays" label="-1">永久</el-radio>
        </p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="banBtn">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 解封弹框 -->
    <el-dialog title="解封操作" :visible.sync="dialogVisibleB" width="40%">
      <div class="dialogBox">
        <p>
          <span>用户ID</span>
          <el-input v-model="idB" placeholder="请输入内容" disabled></el-input>
        </p>
        <p>
          <span>用户昵称</span>
          <el-input
            v-model="nameB"
            placeholder="请输入内容"
            disabled
          ></el-input>
        </p>
        <p>
          <span>当前封禁功能</span>
          <el-checkbox-group class="jiefengGroup" v-model="banTypeB">
            <el-checkbox label="1">封禁账号</el-checkbox>
            <!-- <el-checkbox label="2">封禁匹配</el-checkbox> -->
            <!-- <el-checkbox label="3">封禁预约</el-checkbox> -->
            <!-- <el-checkbox label="4">封禁充值</el-checkbox> -->
            <!-- <el-checkbox label="5">封禁提现</el-checkbox> -->
          </el-checkbox-group>
          <span class="jiefengSpan">解封时间</span>
          <el-input
            v-model="userInfo.enableTime"
            placeholder="解封时间"
            disabled
          ></el-input>
          <span class="jiefengSpan">封禁原因</span>
          <el-input
            v-model="reasonB"
            placeholder="封禁原因"
            disabled
          ></el-input>
        </p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleB = false">取 消</el-button>
        <el-button type="primary" @click="unseal">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 变更身份弹窗 -->
    <el-dialog
      title="用户角色变更"
      :visible.sync="userTypeShow"
      width="30%"
      center
    >
      <el-form label-position="right" label-width="80px" :model="userTypeForm">
        <el-form-item label="用户身份">
          <el-radio-group
            v-model="userTypeForm.userType"
            @change="userTypeForm.union = ''"
          >
            <el-radio label="1">认证用户</el-radio>
            <el-radio label="3">工会用户</el-radio>
            <el-radio label="2">平台认证用户</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-show="userTypeForm.userType == 3" label="所属工会">
          <el-select
            v-model="userTypeForm.union"
            filterable
            placeholder="请选择或输入"
          >
            <el-option
              v-for="item in unionOptions"
              :key="item.value"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="userTypeShow = false">取 消</el-button>
        <el-button type="primary" @click="submitChange">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 更改标签 -->
    <el-dialog title="变更标签" :visible.sync="lableShow" width="30%" center>
      <el-form label-position="right" label-width="80px">
        <el-form-item label="当前标签">
          <el-select
            style="width: 100%"
            v-model="userInfo.lable"
            placeholder=""
            disabled
          >
            <el-option
              v-for="item in lableOption"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="更改标签">
          <el-select
            v-model="changeLable"
            style="width: 100%"
            placeholder="请选择"
          >
            <el-option
              v-for="item in lableOption"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="lableShow = false">取 消</el-button>
        <el-button type="primary" @click="submitLableChange">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import GoldWater from "./GoldWater";
import IntegralWater from "./IntegralWater";
import {
  userUserDetail,
  callDetailLog,
  userBan,
  userUnbundling,
  BindCodeBind,
  userCancel,
  userEditCredit,
  userBusinessDetails,
  userBusinessIsFinish,
  userDelHeadimgOrName, //删除头像
  userThirdAccountUnbinding, //解绑第三方
  userClearDiamond, //清空宝石
  userChangeIdentity, //用户身份变更
  userChangeLable,
  // userCode,
} from "@/api/UserManagement";
export default {
  components: { GoldWater, IntegralWater },
  data() {
    return {
      loading: false,
      id: "",
      name: "",
      userInfo: {
        IDCard: "", //身份证号码
        age: "",
        authTime: "", //认证时间
        avatar: "",
        banReason: "",
        bindCode: "",
        bindId: "",
        birthday: "",
        callAvgTime: "", //平均时长 单位秒
        callCount: "", //通话次数
        callTotalTime: "", //通话时长 单位秒
        channel: "",
        code: "",
        codeAgent: "",
        coin: "",
        credit: "", //信誉值
        diamond: "", //宝石数量
        enableTime: "", //解封时间
        firstVipTime: "",
        id: "",
        ip: "",
        isAuth: "", //实名状态
        isVip: "", //是否vip 1是 0否
        lastLoginTime: "", //上次登录时间
        lossDay: "",
        mobile: "",
        nickName: "",
        onlineStatus: "",
        photoRealAuth: "",
        qq: "",
        realName: "", //真实姓名
        registerTime: "", //注册时间
        role: "", //角色VIP
        sex: "",
        sources: "",
        status: "", //账号状态 0.正常 1.封禁 2.删除
        system: "",
        userId: "",
        version: "", //版本
        vipExpiredTime: "", //vip过期时间
        voiceLable: "",
        wechat: "",
      },
      //弹窗控制开关
      waterShow: false,
      waterTitle: "",
      waterType: null,
      //弹窗表单
      // 封禁弹框
      dialogVisible: false,
      banReason: "资料作假", //违规原因
      banType: ["1"], //封禁功能
      banDays: "1", //封禁时间

      // 解封弹框
      dialogVisibleB: false,
      idB: "",
      nameB: "",
      banTypeB: ["1"],
      reasonB: "",
      dayB: "",
      //用户角色变更
      userTypeShow: false,
      userTypeForm: {
        userType: "",
        union: "",
      },
      unionOptions: [],
      lableOption: [],
      changeLable: "",
      lableShow: false,
    };
  },
  methods: {
    //获取用户信息
    getData(id) {
      if (!id) {
        return;
      }
      this.loading = true;
      userUserDetail({
        userId: id,
      }).then((res) => {
        this.loading = false;
        if (res.code == 0) {
          this.userInfo = res.data;
          this.unionOptions = res.data.union;
          if (this.userInfo.status == 0) {
            this.userInfo.status = "正常";
          } else if (this.userInfo.status == 1) {
            this.userInfo.status = "已封禁";
          } else if (this.userInfo.status == 2) {
            this.userInfo.status = "已注销";
          }
          if (this.userInfo.isVip == 0) {
            this.userInfo.isVip = "否";
          } else {
            this.userInfo.isVip = "是";
          }
          if (this.userInfo.sex == 1) {
            this.lableOption = this.userInfo.lableInfo.map((item) => {
              return { id: item.id, title: item.man_title };
            });
          } else {
            this.lableOption = this.userInfo.lableInfo.map((item) => {
              return { id: item.id, title: item.women_title };
            });
          }
        }
      });
    },
    //删除头像或昵称
    delAvatar(type) {
      this.$confirm(`是否删除该用户${type == 1 ? "头像" : "昵称"}？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await userDelHeadimgOrName({
            user_id: this.userInfo.userId,
            type,
          });
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          }
          this.getData(this.userInfo.userId);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //修改信誉值
    editCredit() {
      this.$confirm("是否修改该用户心动值？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await userEditCredit({
            user_Id: this.userInfo.userId,
            credit: this.userInfo.credit,
          });
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: "修改成功!",
            });
          }
          this.getData(this.userInfo.userId);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消修改",
          });
          this.getData(this.userInfo.userId);
        });
    },
    //变更用户身份
    changeUserType() {
      switch (this.userInfo.identity) {
        case "普通用户":
          this.userTypeForm.userType = "";
          break;
        case "认证用户":
          this.userTypeForm.userType = "1";
          break;
        case "工会用户":
          this.userTypeForm.userType = "3";
          this.userTypeForm.union = this.userInfo.unionName;
          break;
        case "平台认证用户":
          this.userTypeForm.userType = "2";
          break;
      }
      this.userTypeShow = true;
    },
    //变更用户身份提交
    async submitChange() {
      const res = await userChangeIdentity({
        user_id: this.userInfo.userId,
        identity: this.userTypeForm.userType,
        union_id: this.userTypeForm.union,
      });
      if (res.code == 0) {
        this.userTypeShow = false;
        this.getData(this.userInfo.userId);
      }
    },
    //绑定邀请人
    async bindingInvite() {
      let code;
      const res = await userUserDetail({
        userId: this.userInfo.bindId,
      });
      if (res.code == 0) {
        code = res.data.code;
        BindCodeBind({
          user_id: this.userInfo.id,
          code,
        }).then((res) => {
          // console.log(res);
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: "绑定成功！",
            });
            this.getData(this.userInfo.userId);
          }
        });
      }
    },
    //解除实名认证
    unbindBtn() {
      if (!this.userInfo.userId) {
        this.$message.error("未查询到用户信息！");
        return;
      }
      this.$confirm("此操作将解绑该用户的实名认证, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          userUnbundling({
            id: this.userInfo.id,
          }).then((res) => {
            if (res.code == 0) {
              this.$message({
                type: "success",
                message: "解绑操作成功!",
              });
              this.getData(this.userInfo.userId);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消解绑操作",
          });
        });
    },

    //流水弹框
    water(type) {
      if (type == 1) {
        this.waterTitle = "金币流水";
        this.waterType = 1;
        this.waterShow = true;
      }
      if (type == 2) {
        this.waterTitle = "宝石流水";
        this.waterType = 2;
        this.waterShow = true;
      }
    },
    //解绑第三方
    unbundling(type) {
      let msg = type == "1" ? "QQ" : "微信";
      this.$confirm(`是否解绑该用户${msg}信息?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await userThirdAccountUnbinding({
            type,
            user_id: this.userInfo.userId,
          });
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: "解绑成功!",
            });
            this.getData(this.userInfo.userId);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消解绑",
          });
        });
    },
    //禁封
    //封禁
    userBanBtn() {
      this.dialogVisible = true;
      this.id = this.userInfo.userId;
      this.name = this.userInfo.nickName;
    },
    //提交禁封
    banBtn() {
      if (this.banType && this.banReason && this.banDays !== "") {
        userBan({
          id: this.id,
          ban: 1,
          banType: this.banType, //封禁类型 0未封禁 1.封禁账号 2.封禁匹配 3.封禁预约
          reason: this.banReason, //封禁原因类型
          day: this.banDays, //封禁天数
        }).then((res) => {
          if (res.code == 0) {
            this.dialogVisible = false;
            this.$message({
              message: "封禁成功",
              type: "success",
            });
            this.getData(this.userInfo.userId);
          }
        });
      } else {
        this.$message({
          message: "必填封禁选项",
          type: "warning",
        });
      }
    },
    // 注销账号按钮
    cancellation() {
      this.$confirm("此操作将注销该账号, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          userCancel({
            id: this.userInfo.id,
          }).then((res) => {
            if (res.code == 0) {
              this.$message({
                type: "success",
                message: "注销成功!",
              });
              this.getData(this.userInfo.userId);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    //解封
    unsealBtn() {
      this.dialogVisibleB = true;
      this.idB = this.userInfo.userId;
      this.nameB = this.userInfo.nickName;
      this.banTypeB = this.banType; //封禁类型 0未封禁 1.封禁账号 2.封禁匹配 3.封禁预约
      this.reasonB = this.userInfo.banReason; //封禁原因类型
      this.dayB = this.userInfo.banDays; //封禁天数
    },
    unseal() {
      userBan({
        id: this.userInfo.userId,
        ban: 0,
        banType: [1], //封禁类型 0未封禁 1.封禁账号 2.封禁匹配 3.封禁预约
        reason: "1", //封禁原因类型
        day: "1", //封禁天数
      }).then((res) => {
        if (res.code == 0) {
          this.dialogVisibleB = false;
          this.$message({
            message: "解封成功",
            type: "success",
          });
          this.getData(this.userInfo.userId);
        }
      });
    },
    //清空宝石
    clearGem() {
      this.$confirm("此操作将清空该用户宝石, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          userClearDiamond({
            user_id: this.userInfo.userId,
          }).then((res) => {
            if (res.code == 0) {
              this.$message({
                type: "success",
                message: "清空成功!",
              });
              this.getData(this.userInfo.userId);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    //修改心动值标签
    setLable() {
      this.lableShow = true;
    },
    async submitLableChange() {
      const res = await userChangeLable({
        user_id: this.userInfo.userId,
        lable_id: this.changeLable,
      });
      if (res.code == 0) {
        this.$message.success("更新成功！");
        this.getData(this.userInfo.userId);
        this.lableShow = false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.Details {
  h3 {
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    div {
      display: flex;
      align-items: center;
      .tag {
        display: inline-block;
        width: 5px;
        height: 18px;
        background-color: #7b94d8;
        margin-right: 10px;
      }
    }
  }
  .td {
    color: #909399;
    padding-left: 10px;
  }
  .avatarBox {
    position: relative;
    .oneline {
      position: absolute;
      bottom: 5px;
      right: 0px;
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: 50%;
    }
    .imgV {
      width: 26px;
      height: 26px;
      border-radius: 13px;
      position: absolute;
      top: -6px;
      right: -10px;
    }
  }
  .dialogBox {
    p {
      display: flex;
      span {
        width: 100px;
        line-height: 40px;
      }
      .el-radio,
      .el-checkbox-group {
        line-height: 40px;
      }
      .el-input {
        width: 200px;
      }
      .jiefengSpan {
        text-align: right;
        margin-right: 10px;
      }
      .jiefengGroup {
        margin-left: 10px;
      }
    }
  }
}
</style>